<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

<h:body>
	<ui:composition template="/secured/workarea.xhtml">
		<ui:define name="espacio_trabajo">
			<h:form id="form">
				<table>
					<tr>
						<td align="left">
							<div class="breadcrumb flat" style="text-align: left">
								<h:commandLink action="#{menuBean.regresaInicio}" value="Inicio" />
								<h:outputLink value="#" styleClass="active">#{msg.frsListaProgramas}</h:outputLink>
							</div></td>
					</tr>
				</table>
				<p:growl id="growl" showDetail="true" />
				<p:panel>
					<h:outputText
						value="#{msg.frsProgramaEstudios}"
						style="text-align:left;" />
				</p:panel>
				<p:panel>
					<h:panelGrid columns="4" style="text-align:left;">
						<p:commandButton id="deleteButton" value="#{msg.eliminar }"
							icon="ui-icon-trash" onclick="borrarDialog.show()" update="growl" />
						<p:commandButton id="editarButton" value="#{msg.editar }"
							icon="ui-icon-pencil" onclick="editarDialog.show()"
							update=":form:displayEditar growl" />
						<p:commandButton id="viewButton" value="#{msg.ver }"
							actionListener="#{beanProgramaEstudios.testVer}"
							icon="ui-icon-search" oncomplete="verDialog.show()"
							update=":form:displayVer growl" />
						<p:commandButton id="nuevoButton" value="#{msg.nuevo }"
							icon="ui-icon-plusthick" onclick="nuevoDialog.show()"
							update="growl" />
					</h:panelGrid>
				</p:panel>
				<p:panel>
					<p:dataTable id="catGralTable"
						value="#{beanProgramaEstudios.listItems}" var="item"
						rowKey="#{item.idProgEstudio}" paginator="true"
						selection="#{beanProgramaEstudios.selectedItem}"
						filteredValue="#{beanProgramaEstudios.filteredList }"
						paginatorPosition="bottom" rows="#{beanTabla.noRegistros}">
						<p:column selectionMode="single" style="width:2%" />
						<p:column id="catCveColumn" headerText="#{msg.clave}"
							filterBy="#{item.clave }" sortBy="#{item.clave}">
							<h:outputText id="nombreCve" value="#{item.clave}" />
						</p:column>
						<p:column id="catDscColumn" headerText="#{msg.descripcion}"
							filterBy="#{item.dsc }" sortBy="#{item.dsc}">
							<h:outputText id="nombreDscTblDsc" value="#{item.dsc}" />
						</p:column>
						<p:column id="catEstatusColumnTipo" headerText="#{msg.tipo}"
							filterBy="#{item.tipo }" sortBy="#{item.tipo}">
							<h:outputText id="nombreEstatusTblTipo" value="#{item.tipo}" />
						</p:column>
						<p:column id="catEstatusColumnAutNo"
							headerText="#{msg.autorizacion}" filterBy="#{item.noAut }"
							sortBy="#{item.noAut}">
							<h:outputText id="nombreEstatusTblNoAut" value="#{item.noAut}" />
						</p:column>
						<p:column id="catEstatusColumnAut" headerText="#{msg.fechaAut}"
							filterBy="#{item.fechaAutString }"
							sortBy="#{item.fechaAutString}">
							<h:outputText id="nombreEstatusTblAut"
								value="#{item.fechaAutString}" />
						</p:column>
					</p:dataTable>
					<h:panelGroup>
						<h:panelGrid columns="3" style="text-align:left;">
							<h:outputText value="#{msg.registrosPP}"
								style="font-size:x-small" />
							<h:panelGroup>
								<h:inputText size="3"
									style="font-size:x-small; height:15px; width:25px"
									value="#{beanTabla.registros}" id="noRegistrosPP" />
								<p:watermark value="#{beanTabla.noRegistros}"
									for="noRegistrosPP" />
							</h:panelGroup>
							<p:commandButton icon="ui-icon-arrowrefresh-1-w"
								style="font-size:x-small" update="catGralTable"
								actionListener="#{beanTabla.actualizaRegistros}" />
						</h:panelGrid>
					</h:panelGroup>
				</p:panel>
				<!-- Inicio de panel monitor de descarga -->
				<p:dialog modal="true" widgetVar="statusDownloadDialog"
					header="Status" draggable="false" closable="false">
					<p:graphicImage value="/images/ajax-loader.gif" />
				</p:dialog>
				<!-- Fin de panel monitor de descarga -->
				<!-- Panel de Ver -->
				<p:dialog id="dialog" header="#{msg.ver}" widgetVar="verDialog"
					modal="true" draggable="false" position="top">
					<h:panelGrid id="displayVer" columns="2" cellpadding="4">
						<h:panelGroup id="messagePanelVer" layout="block">
							<h:messages errorStyle="color: red" infoStyle="color: green"
								layout="list" style="font-size:12px;font-family:Arial" />
							<h:panelGrid columns="2">
								<h:panelGrid columns="2">
									<h:outputText value="#{msg.clave }" />
									<p:inputText
										value="#{beanProgramaEstudios.selectedItem.clave }"
										readonly="true"
										style="height:100%; width: 100%; font-weight:bold;" />
									<h:outputText value="#{msg.descripcion }" />
									<p:inputText value="#{beanProgramaEstudios.selectedItem.dsc }"
										style="height:100%; width: 100%; font-weight:bold;"
										readonly="true" />
									<h:outputText value="#{msg.tipo }" />
									<p:inputText value="#{beanProgramaEstudios.selectedItem.tipo }"
										style="height:100%; width: 100%; font-weight:bold;"
										readonly="true" />
									<h:outputText value="#{msg.noAut }" />
									<p:inputText
										value="#{beanProgramaEstudios.selectedItem.noAut }"
										style="height:100%; width: 100%; font-weight:bold;"
										readonly="true" />
									<h:outputText value="#{msg.horasPractica }" />
									<p:inputText
										value="#{beanProgramaEstudios.selectedItem.horasPractica }"
										style="height:100%; width: 100%; font-weight:bold;"
										readonly="true" />
								</h:panelGrid>
								<h:panelGrid columns="2">
									<h:outputText value="#{msg.fecha }" />
									<p:inputText
										value="#{beanProgramaEstudios.selectedItem.fechaAutString }"
										style="height:100%; width: 100%; font-weight:bold;"
										readonly="true" />
									<h:outputText value="#{msg.horasTeoria }" />
									<p:inputText
										value="#{beanProgramaEstudios.selectedItem.horasTeoria }"
										style="height:100%; width: 100%; font-weight:bold;"
										readonly="true" />
								</h:panelGrid>
							</h:panelGrid>
							<p:separator />
							<p:tabView>
								<p:tab title="#{msg.materias }">
									<p:dataTable id="materiasTableVer"
										value="#{beanProgramaEstudios.listMateriasVer}" var="item"
										rowKey="#{item.idProgrEstMateria}"
										selection="#{beanProgramaEstudios.materiaSelected}"
										selectionMode="single">
										<p:column headerText="#{msg.materia }">
											<h:outputText value="#{item.materia.nombre }" />
										</p:column>
										<p:column headerText="#{msg.horasPractica }">
											<h:outputText value="#{item.horasPractica }" />
										</p:column>
										<p:column headerText="#{msg.horasTeoria }">
											<h:outputText value="#{item.horasTeoria }" />
										</p:column>
									</p:dataTable>
								</p:tab>
								<p:tab title="#{msg.autorizacion }">
									<p:dataTable id="materiasTableVer2"
										value="#{beanProgramaEstudios.listAutVer}" var="item"
										rowKey="#{item.idAutorizacion}"
										selection="#{beanProgramaEstudios.autSelected}"
										selectionMode="single">
										<p:ajax event="rowSelect"
											listener="#{beanProgramaEstudios.onDocumentoSelect}" />
										<p:column headerText="#{msg.archivo }">
											<h:outputText value="#{item.doc.nombre }" />
										</p:column>
									</p:dataTable>
									<p:commandButton value="#{msg.ver }" ajax="false"
										onclick="PrimeFaces.monitorDownload(showStatus, hideStatus)">
										<p:fileDownload value="#{beanProgramaEstudios.file}" />
									</p:commandButton>
								</p:tab>
							</p:tabView>
						</h:panelGroup>
						<h:outputText />
					</h:panelGrid>
					<p:commandButton id="aceptarVerBtn" value="#{msg.aceptar }"
						icon="ui-icon-check" onclick="verDialog.hide()" />
				</p:dialog>
				<!-- Fin de panel de Ver -->
				<!--  Inicio panel de Nuevo -->
				<p:dialog id="dialogNuevo" header="#{msg.frsNuevoRegistro}"
					widgetVar="nuevoDialog" closable="true" modal="true"
					draggable="false" position="top" width="800" height="500">
					<h:panelGrid id="displayNuevo" columns="2" cellpadding="4">
						<h:panelGroup id="messagePanelNuevo" layout="block">
							<h:messages errorStyle="color: red" infoStyle="color: green"
								layout="list" style="font-size:12px;font-family:Arial" />
							<h:panelGrid columns="2">
								<h:panelGrid columns="2">
									<h:outputText value="#{msg.clave }*" />
									<p:inputText value="#{beanProgramaEstudios.nuevoClave }"
										style="height:100%; width: 100%; font-weight:bold;"
										label="Clave" />
									<h:outputText value="#{msg.descripcion }*" />
									<p:inputText value="#{beanProgramaEstudios.nuevoDsc }"
										style="height:100%; width: 100%; font-weight:bold;"
										label="Descripcion" />
									<h:outputText value="#{msg.tipo }*" />
									<p:selectOneMenu value="#{beanProgramaEstudios.nuevoIdTipo }"
										style="height:100%; width: 260px; font-weight:bold;"
										label="Tipo">
										<f:selectItem itemLabel="#{msg.seleccionarTipo }"
											itemValue="0" />
										<f:selectItems value="#{beanProgramaEstudios.listTipos }" />
									</p:selectOneMenu>
									<h:outputText value="#{msg.noAut }*" />
									<p:inputText value="#{beanProgramaEstudios.nuevoNoAut }"
										style="height:100%; width: 100%; font-weight:bold;"
										label="NoAut." />
								</h:panelGrid>
								<h:panelGrid columns="2">
									<h:outputText value="#{msg.fecha }*" />
									<p:calendar navigator="true" pattern="dd/MM/yyyy"
										value="#{beanProgramaEstudios.nuevoFechaAut }"
										styleClass="dateTimeField3" />
									<h:outputText value="#{msg.horasTeoria }*" />
									<p:inputText value="#{beanProgramaEstudios.nuevoHorasTeoria }"
										style="height:100%; width: 100%; font-weight:bold;"
										label="HorasTeoria" />
									<h:outputText value="#{msg.horasPractica }*" />
									<p:inputText
										value="#{beanProgramaEstudios.nuevoHorasPractica }"
										style="height:100%; width: 100%; font-weight:bold;"
										label="HorasPractica" />
								</h:panelGrid>
							</h:panelGrid>
							<p:separator />
							<p:tabView>
								<p:tab title="#{msg.materias }">
									<p:dataTable id="materiasTableNuevo"
										value="#{beanProgramaEstudios.listMateriasNuevo}" var="item"
										rowKey="#{item.idProgrEstMateria}"
										selection="#{beanProgramaEstudios.materiaSelected}"
										selectionMode="single">
										<p:column headerText="#{msg.materia }">
											<p:inputText readonly="true" value="#{item.materia.nombre }" />
										</p:column>
										<p:column headerText="#{msg.horasPractica }">
											<p:inputText readonly="true" value="#{item.horasPractica }" />
										</p:column>
										<p:column headerText="#{msg.horasTeoria }">
											<p:inputText readonly="true" value="#{item.horasTeoria }" />
										</p:column>
									</p:dataTable>
									<h:panelGrid columns="4">
										<p:selectOneMenu
											value="#{beanProgramaEstudios.nuevoMateriaId}"
											style="height:100%; width: 180px; font-weight:bold;">
											<f:selectItems
												value="#{beanProgramaEstudios.listMateriasDisponibles }" />
										</p:selectOneMenu>
										<h:panelGroup>
											<p:inputText
												value="#{beanProgramaEstudios.nuevoMateriaHorasPracticas }"
												style="height:100%; width: 200px; font-weight:bold;"
												id="nuevoMateriaHorasPracticasInput" />
											<p:watermark value="#{msg.horasPractica }"
												for="nuevoMateriaHorasPracticasInput" />
										</h:panelGroup>
										<h:panelGroup>
											<p:inputText
												value="#{beanProgramaEstudios.nuevoMateriaHorasTeoria }"
												style="height:100%; width: 200px; font-weight:bold;"
												id="nuevoMateriaHorasTeoriaInput" />
											<p:watermark value="#{msg.horasTeoria }"
												for="nuevoMateriaHorasTeoriaInput" />
										</h:panelGroup>
										<p:commandButton icon="ui-icon-circle-plus"
											actionListener="#{beanProgramaEstudios.addNuevoMateriaALista }"
											update="materiasTableNuevo" />
									</h:panelGrid>
								</p:tab>
								<p:tab title="#{msg.autorizacion }">
									<p:dataTable id="materiasTableNuevo2"
										value="#{beanProgramaEstudios.listAutNuevo}" var="item"
										rowKey="#{item.idAutorizacion}"
										selection="#{beanProgramaEstudios.autSelected}"
										selectionMode="single">
										<p:column headerText="#{msg.archivo }">
											<h:outputText value="#{item.doc.nombre }" />
										</p:column>
									</p:dataTable>
									<p:fileUpload label="#{msg.frsSeleccionar }" fileLimit="1"
										showButtons="false" uploadLabel="#{msg.cargar }"
										cancelLabel="#{msg.cancelar }"
										fileUploadListener="#{beanProgramaEstudios.handlerNuevoRegistroFileUpload}"
										mode="advanced" update=":form:growl materiasTableNuevo2" />
									<!-- <p:commandButton icon="ui-icon-plusthick" style="float: right"
										update="materiasTableNuevo2"
										value="#{msg.agregar }"
										actionListener="#{beanProgramaEstudios.addNuevoDocumento}" />-->
								</p:tab>
							</p:tabView>
						</h:panelGroup>
						<h:outputText />
					</h:panelGrid>
					<h:panelGrid style="float: right;" columns="2">
						<p:commandButton value="#{msg.aceptar }" icon="ui-icon-check"
							actionListener="#{beanProgramaEstudios.save }"
							update=":form:catGralTable growl displayNuevo" />
						<p:commandButton value="#{msg.cancelar }"
							icon="ui-icon-closethick" onclick="nuevoDialog.hide()"
							actionListener="#{beanProgramaEstudios.saveCancel }" />
					</h:panelGrid>
				</p:dialog>
				<!-- Fin de panel de nuevo -->
				<!-- Inicio de panel de edicion -->
				<p:dialog id="dialogEditar" header="#{msg.frsEditarRegistro}"
					widgetVar="editarDialog" closable="true" modal="true"
					draggable="false" position="top" width="800" height="500">
					<h:panelGrid id="displayEditar" columns="2" cellpadding="4">
						<h:panelGroup id="messagePanelEditar" layout="block">
							<h:messages errorStyle="color: red" infoStyle="color: green"
								layout="list" style="font-size:12px;font-family:Arial" />
							<h:panelGrid columns="2">
								<h:panelGrid columns="2">
									<h:outputText value="#{msg.clave }" />
									<h:panelGroup>
										<p:inputText id="editarCveId"
											value="#{beanProgramaEstudios.editarClave }"
											style="height:100%; width: 100%; font-weight:bold;" />
										<p:watermark
											value="#{beanProgramaEstudios.selectedItem.clave}"
											for="editarCveId" />
									</h:panelGroup>
									<h:outputText value="#{msg.descripcion }" />
									<h:panelGroup>
										<p:inputText id="editarDscId"
											value="#{beanProgramaEstudios.editarDsc }"
											style="height:100%; width: 100%; font-weight:bold;" />
										<p:watermark value="#{beanProgramaEstudios.selectedItem.dsc}"
											for="editarDscId" />
									</h:panelGroup>
									<h:outputText value="#{msg.tipo }" />
									<p:selectOneMenu value="#{beanProgramaEstudios.editarIdTipo }"
										style="height:100%; width: 260px; font-weight:bold;">
										<f:selectItem itemLabel="#{msg.seleccionarTipo }"
											itemValue="0" />
										<f:selectItems value="#{beanProgramaEstudios.listTipos }" />
									</p:selectOneMenu>
									<h:outputText value="#{msg.noAut }" />
									<h:panelGroup>
										<p:inputText id="editarNoautId"
											value="#{beanProgramaEstudios.editarNoAut }"
											style="height:100%; width: 100%; font-weight:bold;" />
										<p:watermark
											value="#{beanProgramaEstudios.selectedItem.noAut}"
											for="editarNoautId" />
									</h:panelGroup>
									<h:outputText value="#{msg.horasPractica }" />
									<h:panelGroup>
										<p:inputText id="editarHorasPracticaId"
											value="#{beanProgramaEstudios.editarHorasPractica }"
											style="height:100%; width: 100%; font-weight:bold;" />
										<p:watermark
											value="#{beanProgramaEstudios.selectedItem.horasPractica}"
											for="editarHorasPracticaId" />
									</h:panelGroup>
								</h:panelGrid>
								<h:panelGrid columns="2">
									<h:outputText value="#{msg.fecha }" />
									<p:calendar navigator="true" pattern="dd/MM/yyyy"
										value="#{beanProgramaEstudios.editarFechaAut }"
										styleClass="dateTimeField" />
									<h:outputText value="#{msg.horasTeoria }" />
									<h:panelGroup>
										<p:inputText id="editarHorasTeoriaId"
											value="#{beanProgramaEstudios.editarHorasTeoria }" />
										<p:watermark
											value="#{beanProgramaEstudios.selectedItem.horasTeoria}"
											for="editarHorasTeoriaId" />
									</h:panelGroup>
								</h:panelGrid>
							</h:panelGrid>
							<p:separator />
							<p:tabView>
								<p:tab title="#{msg.materias }">
									<p:dataTable id="materiasTableEditar"
										value="#{beanProgramaEstudios.listMateriasEditar}" var="item"
										rowKey="#{item.idProgrEstMateria}"
										selection="#{beanProgramaEstudios.materiaSelected}"
										selectionMode="single">
										<p:column headerText="#{msg.materia }">
											<p:inputText value="#{item.materia.nombre }" />
										</p:column>
										<p:column headerText="#{msg.horasPractica }">
											<p:inputText value="#{item.horasPractica }" />
										</p:column>
										<p:column headerText="#{msg.horasTeoria }">
											<p:inputText value="#{item.horasTeoria }" />
										</p:column>
									</p:dataTable>
									<h:panelGrid columns="4">
										<p:selectOneMenu
											value="#{beanProgramaEstudios.editarMateriaId }"
											style="height:100%; width: 260px; font-weight:bold;">
											<f:selectItems
												value="#{beanProgramaEstudios.listMateriasDisponibles }" />
										</p:selectOneMenu>
										<h:panelGroup>
											<p:inputText
												value="#{beanProgramaEstudios.editarMateriaHorasPracticas }"
												style="height:100%; width: 100%; font-weight:bold;"
												id="editarMateriaHorasPracticasInput" />
											<p:watermark value="#{msg.horasPractica }"
												for="editarMateriaHorasPracticasInput" />
										</h:panelGroup>
										<h:panelGroup>
											<p:inputText
												value="#{beanProgramaEstudios.editarMateriaHorasTeoria }"
												style="height:100%; width: 100%; font-weight:bold;"
												id="editarMateriaHorasTeoriaInput" />
											<p:watermark value="#{msg.horasTeoria }"
												for="editarMateriaHorasTeoriaInput" />
										</h:panelGroup>
										<p:commandButton icon="ui-icon-circle-plus"
											actionListener="#{beanProgramaEstudios.addEditarMateriaALista }"
											update="materiasTableEditar" />
									</h:panelGrid>
								</p:tab>
								<p:tab title="#{msg.autorizacion }">
									<p:dataTable id="materiasTableEditar2"
										value="#{beanProgramaEstudios.listAutEditar}" var="item"
										rowKey="#{item.idAutorizacion}"
										selection="#{beanProgramaEstudios.autSelected}"
										selectionMode="single">
										<p:column headerText="#{msg.archivo }">
											<p:inputText readonly="true" value="#{item.doc.nombre }" />
										</p:column>
									</p:dataTable>
									<p:fileUpload label="#{msg.frsSeleccionar }" fileLimit="1"
										showButtons="false" uploadLabel="#{msg.cargar }"
										cancelLabel="#{msg.cancelar }"
										fileUploadListener="#{beanProgramaEstudios.handlerNuevoRegistroFileUpload}"
										mode="advanced" update=":form:growl" />
									<p:commandButton icon="ui-icon-plusthick" style="float: right"
										update="materiasTableEditar2" value="#{msg.agregar }"
										actionListener="#{beanProgramaEstudios.addEditarDocumento}" />
								</p:tab>
							</p:tabView>
						</h:panelGroup>
						<h:outputText />
					</h:panelGrid>
					<h:panelGrid style="float: right;" columns="2">
						<p:commandButton value="#{msg.aceptar }" icon="ui-icon-check"
							oncomplete="editarDialog.hide()"
							actionListener="#{beanProgramaEstudios.update }"
							update=":form:catGralTable growl" />
						<p:commandButton value="#{msg.cancelar }"
							icon="ui-icon-closethick" oncomplete="editarDialog.hide()"
							actionListener="#{beanProgramaEstudios.cancelDelete }" />
					</h:panelGrid>
				</p:dialog>
				<!-- Fin de panel de edicion -->
				<!-- Panel de borrado -->
				<p:confirmDialog showEffect="fade" widgetVar="borrarDialog"
					header="#{msg.confirmar }" message="#{msg.frsBorrarConfirmacion }">
					<p:commandButton value="#{msg.si }"
						actionListener="#{beanProgramaEstudios.delete}"
						update=":form:catGralTable growl"
						styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
						oncomplete="borrarDialog.hide()" />
					<p:commandButton value="#{msg.no }" type="button"
						styleClass="ui-confirmdialog-no" icon="ui-icon-close"
						onclick="borrarDialog.hide()" />
				</p:confirmDialog>
				<!-- Fin de panel de borrado -->
			</h:form>
			<script type="text/javascript">
				function showStatus() {
					statusDownloadDialog.show();
				}
				function hideStatus() {
					statusDownloadDialog.hide();
				}
			</script>
		</ui:define>
	</ui:composition>
</h:body>
</html>